﻿

(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList
        };
    WinJS.Namespace.define("DataExample", publicMembers);

})();


var sampleDown1 = { title: 'Expander down example with header and content binding, icon on left', data: 'Expander control is a custom WinJS control. <br/> Features <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleDown2 = { title: 'Expander down example with fixed size parent container(400px) and binding', data: 'Expander control is a custom WinJS control. <br/> Features  <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleDown3 = { title: 'Expander down example with custom icons and expanded', data: 'Expander control is a custom WinJS control. <br/> Features <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleDown4 = { title: 'Expander down example with form data and binding', data: {text:'Label1',value:'12345'} };

var sampleUp1= { title: 'Expander up example with header and content binding, icon on left', data: 'Expander control is a custom WinJS control. <br/> Features <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleUp2 = { title: 'Expander up example with fixed size parent container(400px) and binding', data: 'Expander control is a custom WinJS control. <br/> Features  <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleUp3 = { title: 'Expander up example with custom icons and expanded', data: 'Expander control is a custom WinJS control. <br/> Features <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleUp4 = { title: 'Expander up example with form data and binding', data: { text: 'Label1', value: '12345' } };

var sampleLeft1 = { title: 'Expander left example\n with header and \ncontent binding, icon on left', data: 'Expander control is a custom WinJS control. <br/> Features <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleLeft2 = { title: 'Expander left example with fixed size parent container(400px) and binding', data: 'Expander control is a custom WinJS control. <br/> Features  <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleLeft3 = { title: 'Expander left example with custom icons and expanded', data: 'Expander control is a custom WinJS control. <br/> Features <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleLeft4 = { title: 'Expander left example with form data and binding', data: { text: 'Label1', value: '12345' } };

var sampleRight1 = { title: 'Expander right example with header and content binding, icon on left', data: 'Expander control is a custom WinJS control. <br/> Features <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleRight2 = { title: 'Expander right example with fixed size parent container(400px) and binding', data: 'Expander control is a custom WinJS control. <br/> Features  <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleRight3 = { title: 'Expander right example with custom icons and expanded', data: 'Expander control is a custom WinJS control. <br/> Features <ol><li>Any expander direction(Down, Left,Right, Up) and arrow position (left, right) </li>   <li>WinJS Template support for both header and content </li><li>Exposes events expand and collapse.</li><li>Customizable with custom css themes</li><li>Text and form elements.</li></ol>' };
var sampleRight4 = { title: 'Expander right example with form data and binding', data: { text: 'Label1', value: '12345' } };

var sampleInner = { title: 'Expander in Expander', data: '' };

var exData = { title: 'THis is a header', value: 'This is content' };

var expanderDown = { title: 'Expander Down', value: 'Expander down example' };

var arrayEx = ['This is content', 'This is Content2', 'This is content3'];




(function () {
    "use strict";

    var list = new WinJS.Binding.List();
    var groupedItems = list.createGrouped(
        function groupKeySelector(item) { return item.group.key; },
        function groupDataSelector(item) { return item.group; }
    );

    // TODO: Replace the data with your real data.
    // You can add data from asynchronous sources whenever it becomes available.
    generateSampleData().forEach(function (item) {
        list.push(item);
    });

    WinJS.Namespace.define("Data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemReference: getItemReference,
        getItemsFromGroup: getItemsFromGroup,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });

    // Get a reference for an item, using the group key and item title as a
    // unique reference to the item that can be easily serialized.
    function getItemReference(item) {
        return [item, new WinJS.Binding.List(item.items)];
    }

    // This function returns a WinJS.Binding.List containing only the items
    // that belong to the provided group.
    function getItemsFromGroup(group) {
        return list.createFiltered(function (item) { return item.group.key === group.key; });
    }

    // Get the unique group corresponding to the provided group key.
    function resolveGroupReference(key) {
        for (var i = 0; i < groupedItems.groups.length; i++) {
            if (groupedItems.groups.getAt(i).key === key) {
                return groupedItems.groups.getAt(i);
            }
        }
    }

    // Get a unique item from the provided string array, which should contain a
    // group key and an item title.
    function resolveItemReference(reference) {
        for (var i = 0; i < groupedItems.length; i++) {
            var item = groupedItems.getAt(i);
            if (item.group.key === reference[0] && item.title === reference[1]) {
                return item;
            }
        }
    }

    // Returns an array of sample data that can be added to the application's
    // data list. 
    function generateSampleData() {
        var itemContent = "<p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat";
        var itemDescription = "Item Description: Pellentesque porta mauris quis interdum vehicula urna sapien ultrices velit nec venenatis dui odio in augue cras posuere enim a cursus convallis neque turpis malesuada erat ut adipiscing neque tortor ac erat";
        var groupDescription = "WinJS Ctk control";

        var expanderDescription = "Expanders";

        // These three strings encode placeholder images. You will want to set the
        // backgroundImage property in your real data to be URLs to images.
        var darkGray = "";
        var lightGray = "";
        var mediumGray = "";

        // Each of these sample groups must have a unique key to be displayed
        // separately.
        var winControls = [
            { key: "group1", title: "WinJS CTK Controls", subtitle: "", backgroundImage: darkGray, description: groupDescription },
            { key: "group2", title: "Group Title: 2", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription }
        ];

        var expanderList = [
            { title: "Expander Down", key:'exampledown', description:'Expander with expand direction down examples' }
            , { title: "Expander Up", key: 'exampleup', description: 'Expander with expand direction up examples' }
            , { title: "Expander Left", key: 'exampleleft', description: 'Expander with expand direction left examples' }
            , { title: "Expander Right", key: 'exampleright', description: 'Expander with expand direction right examples' }
            , { title: "Expander in Expander", key: 'exampleexpander', description: 'Expander in another expander examples' }
        ];
        
        // Each of these sample items should have a reference to a particular
        // group.
        var controls = [
            { group: winControls[0], key: "Expander", title: "Expander", subtitle: "", items:expanderList,page: '/pages/controls/Expander/ExpanderHome.html', backgroundImage: lightGray },
            { group: winControls[0], key: "NumericBox", title: "NumericBox", subtitle: "", page: '/pages/controls/NumericBox/NumericBox.html', backgroundImage: lightGray },
        ];

        return controls;
    }
})();
